<template>
	<view>
		<!-- <view style="margin-left: 223rpx;margin-top: 20rpx;">
			<uploader />
		</view> -->
		<view class="install-container">

			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params['公共区域']" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item label="照片上传" name="照片上传">
					<uploader :max="1" v-model="params['公共区域']['照片上传']" />
				</uni-forms-item>
				<uni-forms-item required label="检查点名称：" name="名称">
					<input :disabled="isNoEdit" maxlength="50" placeholder="请输入公共区域名称" v-model="params['公共区域']['名称']" @input="binddata('公共区域名称',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="检查点地址：" name="地址">
					<choose-address :disabled="isNoEdit" @location="getLocation" placeholder="请输入公共区域地址" v-model="params['公共区域']['地址']" @input="binddata('地址',$event)"></choose-address>
				</uni-forms-item>
				<uni-forms-item required name="消防重点关注对象" label="消防重点对象：">
					<uni-data-checkbox v-model="params['公共区域']['消防重点关注对象']" :localdata="keynoteStatus"></uni-data-checkbox>
				</uni-forms-item>
				<!-- <uni-forms-item required label="具体位置：" name="roomIds">
					<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
				</uni-forms-item> -->
				<uni-forms-item label="备注信息：" name="备注">
					<input :disabled="isNoEdit" maxlength="50" placeholder="请填写备注信息" v-model="params['公共区域']['备注']">
				</uni-forms-item>
				<uni-forms-item>
					<facility-info :hydrantList="hydrantList" 
					:annihilatorList="annihilatorList"
					:smokeList="smokeList"
					:gasTankList="gasTankList" 
					:temperateList="temperateList"
					:hydrantLength="hydrantLength"
					:annihilatorLength="annihilatorLength"
					:smokeLength="smokeLength"
					:gasTankLength="gasTankLength" 
					:temperateLength="temperateLength"
					:isShowAdd="!isNoEdit"
					:isShowDelete="!isNoEdit"
					@more="goMoreInstall" @edit="goEdit" @delete="onDelete" :installList="installList" @add="goAddInstall"></facility-info>
				</uni-forms-item>
				<!-- <uni-forms-item>
					<facility-info></facility-info>
				</uni-forms-item>
				<uni-forms-item>
					<resident-info></resident-info>
				</uni-forms-item> -->
				<button class="grid-btn" @click="submitForm">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import uploader from '../myComponents/image-uploader.vue'
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import FacilityInfo from '../components/facilityInfo.vue'
	import ResidentInfo from '../components/residentInfo.vue'
	import ChooseAddress from '../myComponents/chooseAddress.vue'
	import dayjs from 'dayjs'
	import { mapState } from 'vuex'
	export default {
		components: {
			uploader,
			DatePicker,
			LbPicker,
			FacilityInfo,
			ResidentInfo,
			ChooseAddress
		},
		data() {
			return {
				isNoEdit: false,
				hydrantList: [],
				hydrantLength: 0,
				annihilatorList: [],
				annihilatorLength: 0,
				smokeList: [],
				smokeLength: 0,
				temperateList: [],
				temperateLength: 0,
				gasTankList: [],
				gasTankLength: 0,
				label: '请选择设施类型',
				installList: [],
				installTypeList: this.$type.installTypeList,
				params: {
					所属网格id: null,
					lagitude: null,
					longitude: null,
					检查点类型: 'publicarea',
					公共区域: {
						名称: '',
						地址: '',
						消防重点关注对象: null,
						备注: null,
						照片上传: null
					}
				},
				params1: {
					检查点id: null
				},
				keynoteStatus: [{
						text: '是',
						value: true
					},
					{
						text: '否',
						value: false
					}
				],
				//表单验证规则
				rules: {
					名称: {
						rules: [{
							required: true,
							errorMessage: '请填写公共区域名称',
						}]
					},
					地址: {
						rules: [{
							required: true,
							errorMessage: '请填写地址',
						}]
					},
					消防重点关注对象: {
						rules: [{
							required: true,
							errorMessage: '请选择是否是消防重点关注对象',
						}, ]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.params.id = +options.id
			this.params1.检查点id = +options.id
			this.getCheckPointInfo()
			// this.getInstallList()
		},
		onShow() {
			// this.getCheckPointInfo()
			this.getInstallList()
		},
		created() {
			this.params.所属网格id = uni.getStorageSync('gridInfo').所属网格id 
		},
		computed: {
			...mapState(['personType'])
		},
		methods: {
			goMoreInstall() {
				if(this.personType == 1 ) {
					uni.navigateTo({
						url: '../installationList/installationList?id=' + this.params.id + '&name=' + this.params.公共区域.名称 + '&hidden=' + true
					})
					return
				}
				uni.navigateTo({
					url: '../installationList/installationList?id=' + this.params.id + '&name=' + this.params.公共区域.名称
				})
			},
			goEdit(id) {
				uni.navigateTo({
					url: '../installtionDetail/installtionDetail?id=' + id
				})
			},
			onDelete(id) {
				this.$common.showModal('确定要删除该设施吗?', this.deleteInstall, [id])
			},
			deleteInstall(id) {
				this.$http.post('gridSystem/device/delete', {id}).then(res => {
					if(res.code === 10000){
						uni.showToast({
							title: '删除成功'
						})
						this.getInstallList()
					}
				})
			},
			getInstallList() {
				this.$http.post('gridSystem/device/listWithoutAuth', this.params1).then(res => {
					console.log(res)
					if(res.code === 10000){
						this.installList = res.data.list
						if(res.data.list !== null) {
							this.hydrantList = res.data.list.filter(item => item.设施类型 === 'hydrant').slice(0,2)
							this.annihilatorList = res.data.list.filter(item => item.设施类型 === 'annihilator').slice(0,2)
							this.smokeList = res.data.list.filter(item => item.设施类型 === 'smokeDetector').slice(0,2)
							this.temperateList = res.data.list.filter(item => item.设施类型 === 'temperatureDetector').slice(0,2)
							this.gasTankList = res.data.list.filter(item => item.设施类型 === 'gasTank').slice(0,2)
							this.hydrantLength = res.data.list.filter(item => item.设施类型 === 'hydrant').length
							this.annihilatorLength = res.data.list.filter(item => item.设施类型 === 'annihilator').length
							this.smokeLength = res.data.list.filter(item => item.设施类型 === 'smokeDetector').length
							this.temperateLength = res.data.list.filter(item => item.设施类型 === 'temperatureDetector').length
							this.gasTankLength = res.data.list.filter(item => item.设施类型 === 'gasTank').length
						    return 
						}
							this.hydrantList = []
							this.annihilatorList = []
							this.smokeList = []
							this.temperateList = []
							this.gasTankList = []
							this.hydrantLength = 0
							this.annihilatorLength = 0
							this.smokeLength = 0
							this.temperateLength = 0
							this.gasTankLength = 0
					}
				})
			},
			goAddInstall() {
				uni.navigateTo({
					url: '../createInstallation/createInstallation?id=' + this.params.id + '&name=' + this.params.公共区域.名称
				})
			},
			onChange(event) {
				this.照片上传 = event
			},
			getCheckPointInfo() {
				this.$http.post('gridSystem/checkPoint/info', this.params).then(res => {
					console.log(res)
					if(res.code === 10000){
						if(this.personType == 1) {
							this.isNoEdit = true
							this.keynoteStatus.forEach(item => {
								if(item.value !== res.data.公共区域.消防重点关注对象){
									item.disable = true
								}
							})
						}
						this.params = res.data
						
						// if(this.params.公司.成立日期 !== null) {
						// 	this.params.公司.成立日期 = dayjs(this.params.公司.成立日期).format('YYYY-MM-DD')
						// }
					}
				})
			},
			getLocation(event) {
				this.params.lagitude = event.latitude
				this.params.longitude = event.longitude
				this.params.公共区域.地址 = event.address
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					console.log(this.value1, '值')
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			submitForm(form) {
				console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					console.log('表单数据信息：', res);
					this.editCheckPoint(Object.assign({}, this.params, {公共区域: res}))
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			editCheckPoint(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/checkPoint/update', params).then(res => {
					console.log(res)
					if(res.code === 10000){
						uni.showToast({
							title: '修改成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.install-container {
		padding-bottom: 90rpx;
	}
</style>
